<html>

<meta charset="utf-8">

<title>
    Test for selector
</title>
<head></head>

<body>

<table id="testPosition" style="border: 10px solid red">
    <tr>
        <td>test</td>
    </tr>
</table>

<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>

<h2>id selector</h2>

<div id="idSelector">
    <span id="foo:bar" onclick="show(this.id, 'id')">foo:bar</span></br>
    <span id="foo[bar]" onclick="show(this.id, 'id')">foo[bar]</span></br>
    <span id="foo.bar" onclick="show(this.id, 'id')">foo.bar</span></br>
</div>
</br>

<h2>element selector</h2>

<div id="elementSelector">
    <div onclick="show(this.nodeName, 'element')">DIV1</div>
    <div onclick="show(this.nodeName, 'element')">DIV2</div>
    <span onclick="show(this.nodeName, 'element')">SPAN</span>
</div>
</br>

<h2>class selector</h2>

<div id="classSelector">
    <div class="notMe" onclick="show(this.className, 'class')">div class="notMe"</div>
    <div class="myClass" onclick="show(this.className, 'class')">div class="myClass"</div>
    <span class="myClass2" onclick="show(this.className, 'class')">span class="myClass2"</span>
</div>
</br>

<h2>all *</h2>

<div id="all">
    <span onclick="show('*', '*')">all use *</span>
</div>
</br>

<h2>合并</h2>

<div>
    <div onclick="show('span,p', 'multiple')">div multiple selector</div>
    <p class="myClass"></p>

    <p class="notMyClass"></p>
</div>
</br>

<div class="ancestorDescendant">
    <span onclick="show('.ancestorDescendant span', 'ancestorDescendant')">后代选择器</span>
</div>

<div class="child">
    <span onclick="show('.child > span', 'child')">子选择器</span>
</div>

<div class="close">
    <span onclick="show('h2 + div', 'close')">临近选择器</span>
</div>

<div class="">
    <span onclick="show('h2 ~ div', '')">同辈选择器</span>
</div>
<div class="first">
    <span onclick="show('h2:first', '')">获取第一个元素</span>
</div>

<div>
    <span onclick="show('.not:not(:disabled)', '')">去除选择</span>
    <input class="not" disabled>checked</input>
    <input class="not">not checked</input>
</div>

<table class="tableSelectTest">
    <tr>
        <td>Value 1</td>
    </tr>
    <tr>
        <td>Value 2</td>
    </tr>
    <tr>
        <td>Value 3</td>
    </tr>
    <tr>
        <td>Value 4</td>
    </tr>
</table>
<button style="height:28px;width:90px;"
        onclick="show('.tableSelectTest tr:even', '', function(value){$(value).addClass('red')})">even
</button>
<button style="height:28px;width:90px;"
        onclick="show('.tableSelectTest tr:odd', '', function(value){$(value).addClass('blue')})">odd
</button>
<button style="height:28px;width:90px;"
        onclick="show('.tableSelectTest tr:eq(1)', '', function(value){$(value).addClass('green')})">eq
</button>
<button style="height:28px;width:90px;"
        onclick="show('.tableSelectTest tr:gt(1)', '', function(value){$(value).addClass('black')})">gt
</button>
<button style="height:28px;width:90px;"
        onclick="show('.tableSelectTest tr', '', function(value){$(value).each(function(){if(!$(this).is('table tr:odd')){$(this).toggleClass('red')}})})">
    each
</button>


</body>



<style>
    tr.red {
        background-color: red;
    }

    tr.blue {
        background-color: blue;
    }

    tr.green {
        background-color: green;
    }

    tr.black {
        background-color: black;
    }
</style>

<script src="../../jquery-latest.js"></script>

<script>
    // 全局变量
    var app = {
        obj: {}
    }

    // 自调用匿名函数
    $(function () {
        $.extend({
            logs: function (o, message) {
                var i = 0,
                        length = o.length,
                        isArray = $.isArray(o);
                if (typeof o === 'number') {
                    console.log(message + " value ==== " + o);
                } else if (typeof o === 'string') {
                    console.log(message + " value ==== " + o);
                } else if (isArray) {
                    for (; i < length; i++) {
                        console.log(message + " Index:" + i + " ==== " + o[i]);
                    }
                } else {
                    for (var a in o) {
                        console.log(message + " key:" + a + " ==== value:" + o[a]);
                    }
                }
            }
        });
    });

    $(function () {

        var a = ["a", "b"],
                i = 0,
                b = ["c"],
                c = {a: 1, b: 2};

        // 测试each
        $.each(a, function (i, n) {
            console.log("Func1 index:" + i + "    value:" + n);
        });

        /*	// test each func apply
         var callback = function(i, n){
         alert("Index:" + i + "\nvalue:" + n);
         }

         for(;i<a.length;i++){
         callback.apply(a[i],[i,"test"]);
         }*/

        // 测试extend
        $.extend({
            test: function (a) {
                console.log(a);
            }
        });

        $.test("Test for extend");

        $.extend({}, a, b);

        $.logs(a, "Test for extend object");
        $.logs("test", "Test for extend object");

        $.extend(b, c);
        $.logs(c, "Test for extend object");

        // 测试makeArray
        //	var makeArray = $.makeArray($('.tableSelectTest td'));
        //	var makeArray = $.makeArray(document.getElementsByTagName("div"));
        var makeArray = $.makeArray("test");
        $.logs(makeArray, "Test for make array;");

        // $.inarray(val,arr,[from]): 查找一个元素在数组中的位置。
        var inarray = function (val, arr, i) {
            var length = arr.length;
            if ($.isArray(arr)) {
                if ($.indexOf) {
                    return $.indexOf.call(arr, val, i);
                }
                i = i ? i < 0 ? Math.max(0, length + i) : i : 0;
                for (; i < length; i++) {
                    if (val === arr[i]) {
                        return i;
                    }
                }
            }

            return -1;
        }

        $.logs(inarray("b", a), "Test for inarray:");

        var merge = function (first, second) {
            var i = first.length,
                    j = 0,
                    len = +second.length;

            while (j < len) {
                first[i++] = second[j++];
            }
            return first;
        }

        $.logs(merge([1, 2], {}), "Test for merge:");

        /*	var unique = $.unique($('.tableSelectTest td'));
         $.logs(unique, "Test for unique:");*/

    });

    // 原型
    (function () {
        if (typeof Object.bget !== 'function') {
            Object.bget = function (o) {
                var F = function () {
                };
                F.prototype = o;
                return new F();
            }
        }

        var stooge = {};
        stooge.fuc = function () {
        };
        stooge.name = "s1";
        stooge.id = "1";

        /*	anotherStooge = Object.bget(stooge);
         alert("anotherStooge继承："+anotherStooge.name);
         anotherStooge.name = "s2";
         alert("anotherStooge自属性："+anotherStooge.name);


         delete anotherStooge.name;
         alert("anotherStooge自属性删除后,调用原型中属性："+anotherStooge.name);
         */
    })();

    (function(){
/*        $('body').on("click", "#testPosition td", function(){
            alert("test");
        });*/

/*        $('#testPosition').bind("click", "td", function(event, value){
            alert(value);
        });*/

        // 冒泡事件测试
        $('body').on("click", "#testPosition", function(){
            alert("click table");
        });

        $('body').on("click", "#testPosition td", function(event){
            alert("click td");
            return false;
        });



/*        $('#testPosition').trigger("click", ["test for trigger"]);

        $('#testPosition').unbind("click");*/
    })();

    var show = function (value, flag, func) {
        var ids = {
            "foo:bar": "#foo\\:bar",
            "foo[bar]": "#foo\\[bar\\]",
            "foo.bar": "#foo\\.bar"
        };

        switch (flag) {
            case("id"):
            {
                alert("\"" + $(ids[value])[0].textContent + "\"" + " id selector : " + ids[value]);
            }
                break;
            case("element"):
            {
                alert("\"" + $(value)[0].textContent + "\"" + " element selector : " + value);
            }
                break;
            case("class"):
            {
                alert("\"" + $("." + value)[0].textContent + "\"" + " class selector : " + "." + value);
            }
                break;
            case("*"):
            {
                alert("get " + $(value).length + " elements.");
            }
                break;
            case("multiple"):
            {
                alert("get " + value + " " + $(value).length + " elements.");
            }
                break;
            default:
            {
                if (func) {
                    func(value);
                }
                var context = "";
                for (var i = 0; i < $(value).length; i++) {
                    context += $(value)[i].textContent;
                    if (i < $(value).length - 1) {
                        context += "--";
                    }
                }
                alert("\"" + value + "\" 内容： " + context);
            }
                break;
        }

        /*	if(flag === "id"){
         alert("\"" + $(ids[value])[0].textContent + "\"" + " id selector : " + ids[value]);
         }else if(flag === "element"){
         alert("\"" + $(value)[0].textContent + "\"" + " element selector : " + value);
         }else if(flag === "class"){
         alert("\"" + $("." + value)[0].textContent + "\"" + " class selector : " + "." + value);
         }else if(flag === "*"){
         alert("get " + $(value).length + " elements.");
         }else if(flag === "multiple"){
         alert("get " + value + " " + $(value).length + " elements.");
         }
         */
    }


</script>
</html>